<template>
    <div>
      <!--轮播图区域-->
      <div id="container">
        <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide class="swiper-slide games" v-for="item in imgs">
            <router-link to="/lunboinfo">
              <img class="swi-img" :src="item.url" alt="">
            </router-link>
          </swiper-slide>
          <p class="swiper-pagination" slot="pagination"></p>
        </swiper>
      </div>

      <!--内容区域-->
      <div class="hot-list">
        <div class="con-tit">
         <span class="span"></span>
          <span class="title">热销类目</span>
          <span class="span"></span>
        </div>
        <div class="hot-food">
          <div class="food-list" v-for="item2 in arr1">
            <img :src="item2.src" alt="">
            <span>{{item2.tit}}</span>
          </div>
        </div>
      </div>
      <div class="con-wrap">
       <div class="con-tit">
          <span class="span"></span>
          <span class="title">爆品推荐</span>
          <span class="span"></span>
       </div>

      <div class="enjoy">
        <div class="img-d" v-for="item3 in arr2">
          <router-link to="/xiangqing">
            <div class="hot">
              <img src="../../../static/meishi/meishi-3.png" alt="">
            </div>
            <div class="img-i">
              <img :src="item3.url2" alt="">
            </div>
            <span class="span-tit">{{item3.title}}</span>
            <span class="price">{{item3.price}}</span>
          </router-link>
        </div>
      </div>
      </div>
    </div>
</template>

<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        name: "Food",
      data(){
        return{
          imgs:[
            {url:require('../../../static/meishi/meishi.png')},
            {url:require('../../../static/meishi/meishi.png')},
            {url:require('../../../static/meishi/meishi.png')},
            {url:require('../../../static/meishi/meishi.png')},
            {url:require('../../../static/meishi/meishi.png')}
          ],
          arr1:[
            {src:require('../../../static/meishi/meishi-4.png'),tit:'糖果'},
            {src:require('../../../static/meishi/meishi-5.png'),tit:'膨化'},
            {src:require('../../../static/meishi/meishi-6.png'),tit:'方便面'},
            {src:require('../../../static/meishi/meishi-7.png'),tit:'巧克力'}
          ],
          arr2:[
            {url2:require('../../../static/meishi/meishi-1.png'),title:'野生蓝莓果汁饮料',price:'¥100'},
            {url2:require('../../../static/meishi/meishi-2.png'),title:'原味坚果',price:'¥99'},
            {url2:require('../../../static/meishi/meishi-1.png'),title:'野生蓝莓果汁饮料',price:'¥100'},
            {url2:require('../../../static/meishi/meishi-2.png'),title:'原味坚果',price:'¥99'},
            {url2:require('../../../static/meishi/meishi-1.png'),title:'野生蓝莓果汁饮料',price:'¥100'},
            {url2:require('../../../static/meishi/meishi-2.png'),title:'原味坚果',price:'¥99'},
          ],
          swiperOption: {

            autoplay : {

              disableOnInteraction: false, //用户操作后是否禁止自动循环

              delay: 3000 //自自动循环时间

            }, //可选选项，自动滑动

            speed: 2000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）

            loop:true, //循环切换

            grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状

            // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。

            autoHeight: true,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。

            scrollbar: '.swiper-scrollbar',

            mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动

            observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper

            pagination: {

              el: '.swiper-pagination',

              // type : 'progressbar', //分页器形状

              clickable :true, //点击分页器的指示点分页器会控制Swiper切换

            },



          },

          computed: {

            swiper() {

              return this.$refs.mySwiper.swiper

            }

          }
        }
      }
    }
</script>

<style scoped>
  #container{
    margin-bottom: 2rem;
  }
  #container .swiper-slide .swi-img{
    width: 100%;
    height: auto;
  }

  .hot-list{
    width: 66rem;
    height: 35rem;
    padding: 0 3rem;
    background: #fff;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 2rem;
  }

  .hot-food{
    display: flex;
    justify-content: space-between;
    padding-top:4rem;
  }
  .food-list{
    width: 11rem;
    height: 23rem;
    padding:0 2rem;
    text-align: center;
  }
  .food-list img{
    width: 100%;
    height: 10rem;
  }
  .food-list span{
    display: block;
    color: #000;
    font-size: 2.4rem;
    margin-top: 4rem;
  }
  .con-wrap{
    width: 66rem;
    height: 65rem;
    padding: 0 3rem;
    background: #fff;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
  }

  .con-tit{
    display: flex;
    justify-content: center;
    height: 6rem;
    line-height: 6rem;
  }
  .con-tit .title{
    display: inline-block;
    margin: 0 1.5rem;
    font-size: 3rem;
    color: #4d4d4d;
  }
  .con-tit .span{
    display: inline-block;
    width: 6rem;
    height: 0.1rem;
    background: #cccccc;
    margin-top: 3rem;
  }




  .enjoy{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .img-d{
    position: relative;
    width: 31rem;
    height: 28rem;
    border:1px solid #cccccc;
    text-align: center;
    margin-bottom: 2rem;
  }
  .img-d .hot{
    position: absolute;
    top: 0;
    left: 0rem;
    width: 4rem;
    height: 8rem;
  }
  .img-d .hot img{
    width: 100%;
    height: 100%;
  }
  .img-i{
    width: 23rem;
    height: 12rem;
    padding: 3rem;
  }
  .img-i img{
    width: 100%;
    height: 100%;
  }
  .span-tit{
    display: block;
    color: #000;
    font-size: 2.4rem;
    margin: 1rem 0;
  }
  .price{
    display: block;
    color: #e83d41;
    font-size: 2.4rem;
  }
</style>
